<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    ul {
      display: flex;
      gap: 20px;
    }

    ul li img {
      width: 50px;
      height: 50px;
      vertical-align: middle;
    }
    #placeholder {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <h1>Snapshots</h1>
  <ul id="gallery">
    <li>
      <a href="images/2.jpg" title="A fireworks display">
        <img src="images/2.jpg" alt="fireworks" />
      </a>
    </li>
    <li>
      <a href="images/3.jpg" title="A cup of black coffee">
        <img src="images/3.jpg" alt="Coffee" />
      </a>
    </li>
    <li>
      <a href="images/4.jpg" title="A red rose">
        <img src="images/4.jpg" alt="Rose" />
      </a>
    </li>
    <li>
      <a href="images/5.jpg" title="The famous clock">
        <img src="images/5.jpg" alt="Big Ben">
      </a>
    </li>
  </ul>

  <script>
    function addLoadEvent(func) {
      const oldonload = window.onload;
      if (typeof window.onload !== 'function') {
        window.onload = func
      } else {
        window.onload = function() {
          oldonload();
          func();
        }
      }
    }

    function insertAfter(newEl, targetEl) {
      const parent = targetEl.parentNode;
      if (parent.lastChild === targetEl) {
        parent.appendChild(newEl)
      } else {
        parent.insertBefore(newEl, targetEl.nextSibling)
      }
    }

    function preparePlaceholder() {
      if (!document.createElement) {
        return false
      }
      if (!document.createTextNode) {
        return false
      }
      if (!document.getElementById) {
        return false
      }
      if (!document.getElementById('gallery')) {
        return false
      }

      const img = document.createElement('img')
      img.setAttribute('id', 'placeholder')
      img.setAttribute('src', 'images/1.jpg')
      img.setAttribute('alt', 'im placehoder')
      const p = document.createElement('p')
      p.setAttribute('id', 'description')
      const text = document.createTextNode('Choose an image')
      p.appendChild(text)
      const gallery = document.getElementById('gallery')
      insertAfter(img, gallery)
      insertAfter(p, img)
    }

    function prepareGallery() {
      if (!document.getElementsByTagName) return false;
      if (!document.getElementById) return false;
      if (!document.getElementById('gallery')) return false;
      const gallery = document.getElementById('gallery')
      const links = gallery.getElementsByTagName('a')
      for (let i = 0; i < links.length; i++) {
        links[i].onclick = function() {
          return showPic(this)
        }
        links[i].onkeypress = links[i].onclick
      }
    }

    function showPic(pic) {
      if (!document.getElementById('placeholder')) return true;
      const href = pic.getAttribute('href')
      const holder = document.getElementById('placeholder')
      holder.setAttribute('src', href)
      
      const description = document.getElementById('description')
      if (!description) return false;
      const text = pic.getAttribute('title') || ''
      if (description.firstChild.nodeType === 3) {
        // 文本节点
        description.firstChild.nodeValue = text
      }
      return false
    }
    addLoadEvent(preparePlaceholder)
    addLoadEvent(prepareGallery)
  </script>
</body>
</html>